<script setup lang="ts">
withDefaults(
  defineProps<{
    count?: number;
  }>(),
  {
    count: 0,
  }
);

const open = ref(false);

async function onSubmit() {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  open.value = false;
}
</script>

<template>
  <el-dialog v-model="open" :title="`Delete ${count} customer${count > 1 ? 's' : ''}`">
    <slot />

    <template #footer>
      <div class="flex justify-end gap-2">
        <el-button @click="open = false">Cancel</el-button>
        <el-button type="danger" @click="onSubmit">Delete</el-button>
      </div>
    </template>
  </el-dialog>
</template>
